<template>
  <div id="parts" v-if="data">
    <div class="all">
      <div class="f1">
        <div class="center">
          <div class="head">
            <div class="text">
              <h2>MagSafe 磁吸配<br />件，怎⁠么⁠配都‍搭。</h2>
              <p>保护壳、卡包、无线充电器，或外接电<br />池，全都一贴即合。</p>
              <a href="#">选购 MagSafe 磁吸配件></a>
            </div>
            <img :src="data[`magsafe-202203.jpg`]" />
          </div>
        </div>
      </div>

      <!-- 第二层 -->
      <div class="f2">
        <div class="center">
          <div class="bc">
            <div class="text-1">
              <h2>找到你想要的配件</h2>
              <div class="pj-text1-content">
                <img :src="data[`download (2).svg`]" />
                <input type="text" placeholder="搜索配件" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="f3">
        <div class="center">
          <div class="text-2">
            <p>按产品浏览</p>
            <hr />
            <ul class="tu">
              <li @click="$router.push('/imac')">
                <img :src="data[`icon-product-mac.png`]" />
              </li>
              <li @click="$router.push('/ipad')">
                <img :src="data[`icon-product-ipad.png`]" />
              </li>
              <li @click="$router.push('/iphone')">
                <img :src="data[`icon-product-iphone.png`]" />
              </li>
              <li @click="$router.push('/watch')">
                <img :src="data[`icon-product-watch.png`]" />
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="f3">
        <div class="center">
          <div class="text-3">
            <h2>Apple 精选配件</h2>
            <div class="col1">
              <div class="col1-1">
                <img :src="data[`MN653_AV3.png`]" />
                <div class="text">
                  <span>新款</span>
                  <p>iPhone 13 Pro 专用 MagSafe 硅胶保护<br />壳</p>
                  <p>RMB 399</p>
                </div>
                <div class="tu1">
                  <img :src="data[`MN663_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MN653_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MN673_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MN683_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MM2F3_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MM2H3_SW_COLOR.png`]" alt="" />
                  <span>+</span>
                </div>
              </div>
              <div class="col1-2">
                <img :src="data[`MN663_FV401.png`]" alt="" />
                <div class="text">
                  <span>新款</span>
                  <p>iPhone 13 Pro 专用 MagSafe 硅胶保护壳</p>
                  <p>RMB 399</p>
                </div>
                <div class="tu2">
                  <img :src="data[`MN663_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MN653_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MN673_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MN683_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MM2F3_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MM2H3_SW_COLOR.png`]" alt="" />
                  <span>+</span>
                </div>
              </div>
            </div>
            <div class="col2">
              <div class="col2-1">
                <img :src="data[`MN6L3.png`]" alt="" />
                <div class="text">
                  <span>新款</span>
                  <p>彩虹版回环式运动表带</p>
                  <p>RMB 379</p>
                </div>

                <img :src="data[`MN6K3_SW_COLOR.png`]" alt="" />
              </div>
              <div class="col2-2">
                <img :src="data[`MNA73_FV102.png`]" alt="" />
                <div class="text">
                  <span>新款</span>
                  <p>彩虹版回环式运动表带</p>
                  <p>RMB 379</p>
                </div>
                <div class="tu3">
                  <img :src="data[`MN673_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MM2F3_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MN683_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MH0A3_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MNA63_SW_COLOR.png`]" alt="" />
                  <img :src="data[`MNA43_SW_COLOR.png`]" alt="" />
                  <span>+</span>
                </div>
              </div>
              <div class="col2-3">
                <img :src="data[`MMMR3.png`]" alt="" />
                <div class="text">
                  <span>新款</span>
                  <p>彩虹版回环式运动表带</p>
                  <p>RMB 379</p>
                </div>
                <img :src="data[`MH0D3_SW_COLOR.png`]" alt="" />
              </div>
            </div>
            <a href="#">选购 Apple 配件 ></a>
          </div>
        </div>
      </div>

      <div class="f4">
        <div class="center">
          <div class="text-4">
            <h1>无线耳机</h1>
            <div class="text-4-1">
              <div class="col4-1" @click="$router.push('/airPods2')">
                <img :src="data[`MME73.png`]" alt="" />
                <div class="text4-1">
                  <span>免费镌刻服务</span>
                  <p>AirPods (第二代)</p>
                  <p>RMB 1.399</p>
                </div>
              </div>
              <div class="col4-2" @click="$router.push('/airPods3')">
                <img :src="data[`MWP22.png`]" alt="" />
                <div class="text4-2">
                  <span>免费镌刻服务</span>
                  <p>AirPods (第三代)</p>
                  <p>RMB 1.999</p>
                </div>
              </div>
              <div class="col4-3" @click="$router.push('/airPodsMax')">
                <img
                  :src="data[`airpods-max-select-silver-202011.png`]"
                  alt=""
                />
                <div class="text4-3">
                  <span>免费镌刻服务</span>
                  <p>AirPods (第三代)</p>
                  <p>RMB 4.399</p>
                </div>
              </div>
            </div>
            <a href="#">选购各种无线耳机 ></a>
          </div>
        </div>
      </div>

      <div class="f4">
        <div class="center">
          <div class="text-4">
            <h1>AirTag</h1>
            <div class="text-4-1">
              <div class="col4-1" @click="$router.push('/byAirtag')">
                <img :src="data[`airtag-single-select-202104.png`]" alt="" />
                <div class="text4-1">
                  <span>免费镌刻服务</span>
                  <p>Airtag</p>
                  <p>RMB 1.399</p>
                </div>
              </div>
              <div class="col4-2" @click="$router.push('/byAirtag')">
                <img :src="data[`airtag-4pack-select-202104.png`]" alt="" />
                <div class="text4-2">
                  <span>免费镌刻服务</span>
                  <p>Airtag（四件套）</p>
                  <p>RMB 1.999</p>
                </div>
              </div>
              <div class="col4-3" @click="$router.push('/AirtagH')">
                <img :src="data[`MX4A2.png`]" alt="" />
                <div class="text4-3">
                  <span>免费镌刻服务</span>
                  <p>AirtagH</p>
                  <p>RMB 4.399</p>
                </div>
              </div>
            </div>
            <a href="#">选购 AirTag ></a>
          </div>
        </div>
      </div>

      <div class="f5">
        <div class="center">
          <div class="mini">
            <div class="text">
              <h2>给你点颜色听听。</h2>
              <p>
                精妙设计带来丰富的 360 度音效，环绕整个房间。现有五款配<br />色可选。
              </p>
              <a href="#">选购 HomePod mini ></a>
            </div>
            <img :src="data[`homepod-mini-accessories-202110.jpg`]" alt="" />
          </div>
        </div>
      </div>

      <div class="f6">
        <div class="center">
          <div class="down">
            <ul>
              <li>
                <img :src="data[`icon_large.svg`]" alt="" />
                <div>
                  <b>免费送货</b>
                  <p style="font-size: 14px; color: #1d1d1f">
                    享受送货上门服务，或前往<br />Apple Store零售店提取现货
                  </p>
                  <a href="#">进一步了解></a>
                </div>
              </li>
              <li>
                <img :src="data[`icon-return-2018.png`]" alt="" />
                <div>
                  <b>简单免费的退货服务</b>
                  <p style="font-size: 14px; color: #1d1d1f">
                    从你的账户页面在线完成退货。
                  </p>
                  <a href="#">进一步了解></a>
                </div>
              </li>
              <li>
                <img :src="data[`icon_large (1).svg`]" alt="" />
                <div>
                  <b>分期付款</b>
                  <p style="font-size: 14px; color: #1d1d1f">
                    符合条件的用户可选择灵活的分期付款方式。
                  </p>
                  <a href="#">进一步了解></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/yshImg";
      axios.get(url).then((res) => {
        this.data = res.data;
        console.log(res.data);
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#parts {
  width: 100%;
  height: 100%;
}
</style>
<style scoped src='../assets/css/parts.css'></style>